<template>
    <div>
        <footer class="footer" v-show="isFooterShow">
			<!-- This should be `0 items left` by default -->
			<span class="todo-count"><strong>{{ itemLeftCount }}</strong> item left</span>
			<!-- Hidden if no completed items are left ↓ -->
			<button 
				v-show="isClearComleted" 
				class="clear-completed"
				@click="clearCompleted">Clear completed</button>
		</footer>
    </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from 'vuex'
export default {
	methods: {
    	clearCompleted() {
			this.$store.commit('clearCompleted')
		}
	},
	computed: {
		//将vuex store 里的几个getters属性 映射到组件内的计算属性
		...mapGetters(['isFooterShow', 'itemLeftCount', 'isClearComleted'])
	}
}
</script>

<style>
    
</style>